<template>
	<view class="login">

		<!-- 头像 用户名 -->
		<u-cell-group customStyle="width:100%">
			<u-cell title="头像">
				<button style="width: 100rpx;height: 100rpx;padding: 0;border-radius: 50%;" slot="value"
					class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" style="width: 100%;" :src="formData.wxImg" mode="widthFix"></image>
				</button>
			</u-cell>

			<u-cell title="用户名" :isLink="true" @click="show = true" :value="wxName"></u-cell>

		</u-cell-group>

		<button style="color: #fff;background-color: #3953b8;width: 80%;margin-top: 20rpx;"
			@click="btnClick">保存</button>
		<button style="color: #fff;background-color: #adafb8;width: 80%;margin-top: 20rpx;"
			@click="cancelClick">取消</button>

		<!-- 弹出层 -->
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="10"
			customStyle="padding:40rpx;width:70%">
			<view class="popup">
				<view>用户名</view>
				<view>
					<input type="nickname" class="weui-input" placeholder="请输入用户名" :value="formData.wxName"
						@blur="bindblur" @input="bindinput" style="border: 1px solid #ababab;padding: 10rpx;" />
				</view>
				<view>
					<button style="color: #fff;background-color: #3953b8;height: 80rpx;line-height: 80rpx;"
						@click="popupBtn">保存</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex' // vuex
	import {
		updateUserInfo
	} from '../../api/user.js'
	export default {
		name: "login",
		data() {
			return {
				// 弹出
				show: false,
				wxName: '未填写用户名',
				// 头像用户名
				formData: {
					wxImg: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					wxName: '微信用户'
				}
			};
		},
		computed: {
			...mapState('user', ['userInfo', 'token']) // vuex
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),

			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},

			// 获取头像
			onChooseAvatar(e) {
				// if (item.size / 1024 / 1024 < 1.5) {
				// 	this.uploadFiles(item.url,data)
				// } else {
				// 	this.comImg(item.url,data)
				// }
				this.uploadFilePromise(e.detail.avatarUrl)
			},

			// 图片压缩
			comImg(src, data) {
				uni.compressImage({
					src: src,
					quality: 40,
					success: res => {
						this.uploadFiles(res.tempFilePath, data)
					}
				})
			},

			// 头像上传
			uploadFilePromise(avatarUrl) {
				//调后台接口上传图片  这里的avatarUrl拿到的是微信地址 
				uni.uploadFile({
					url: 'https://wechat.atptest.com:44387/api/PCApplet/UploadLargeFileOBS',
					filePath: avatarUrl,
					name: 'file',
					// header:{'Authorization':`Bearer ${this.token}`},
					success: uploadFileRes => {
						let res = JSON.parse(uploadFileRes.data);
						console.log(res);
						if (res.code === 200) {
							this.formData.wxImg = res.data;
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});
			},

			//用户名
			bindblur(e) {
				this.formData.wxName = e.detail.value
			},
			bindinput(e) {
				this.formData.wxName = e.detail.value
			},

			// 弹出层保存按钮
			popupBtn() {
				this.wxName = this.formData.wxName
				this.show = false
			},

			// 保存按钮
			btnClick() {
				updateUserInfo({
					wxImg: this.formData.wxImg,
					wxName: this.formData.wxName
				}).then((res) => {
					uni.reLaunch({
						url: '/pages/mine/mine'
					})
				})
			},
			// 取消
			cancelClick() {
				// 跳转首页
				uni.reLaunch({
					url: '/pages/home/home'
				})
				// 上传默认头像 跳转个人中心
				// uni.request({
				// 	url:'https://wechat.atptest.com:44387/api/PCApplet/UpdateUserInfo',
				// 	data:{
				// 		wxImg: this.formData.wxImg,
				// 		wxName: this.formData.wxName
				// 	},
				// 	method:'POST',
				// 	header:{'Authorization':`Bearer ${uni.getStorageSync('token')}`},
				// 	success(res) {
				// 		console.log("保存",res);
				// 		uni.reLaunch({
				// 			url:'/pages/mine/mine'
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		// margin-top: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.popup {
			display: flex;
			flex-direction: column;
			align-items: center;

			view {
				width: 100%;
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}
</style>